<template>
  <div class="branch-wrap">
    <div class="branch-box-wrap">
      <BranchBox 
        :node="node"
        @addCondition="addCondition"
        @delNode="delNode"
      >
        <ColBox
          v-for="(item,index) in node.conditionNodes"
          :key="item.nodeId"
          :node="item"
          :pos="index"
          :total="node.conditionNodes ? node.conditionNodes.length : 0"
          @save="save"
          @delConditionNode="delConditionNode(item)"
        />
      </BranchBox>
      <AddNodeBtnBox
        :node="node"
        @addnode="addnode"
      />
    </div>
  </div>
</template>
<script>
import BranchBox from './branch-box'
import ColBox from './col-box.vue'
import AddNodeBtnBox from './add-node-btn-box'
import {uuid} from "@/utils/utils"
import { delConditionNode } from './process'
export default {
  components: {
    ColBox,
    BranchBox,
    AddNodeBtnBox
  },
  props: {
    node: {
      type: Object,
      default: undefined
    }
  },
  data: () => ({
    //
  }),
  mounted () {
  },
  methods: {
    addCondition () {
      let lastNode = this.node.conditionNodes[this.node.conditionNodes.length - 1]
      let node = {
        name: '分支',
        type: 'FILTER',
        prevId: lastNode.prevId,
        nodeId: uuid()
      }
      this.node.conditionNodes.push(node)
      this.save()
    },
    addnode (node) {
      this.$emit('addnode', node)
    },
    delConditionNode (item) {
      delConditionNode(item, this.node)
      if (this.node.conditionNodes.length < 2) {
        this.$emit('delNode')
      }
    },
    delNode () {
      this.$emit('delNode')
    },
    save(){
      this.$emit('save')
    },
  }
}
</script>
